<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.num" placeholder="仓库编号" style="width: 150px;" class="filter-item" />
      <el-input v-model="listQuery.name" placeholder="仓库名称" style="width: 150px;" class="filter-item" />
      <el-select v-model="listQuery.type" placeholder="仓库类型" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button :disabled="!((this.listQuery.num && this.listQuery.num !== '') || (this.listQuery.name && this.listQuery.name !== '') || (this.listQuery.type && this.listQuery.type !== ''))" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-refresh-left" @click="handleReset">
        重置
      </el-button>
      <el-button class="filter-item fr" type="warning" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table :data="tableData" stripe max-height="600">
      <el-table-column prop="num" label="仓库编号" />
      <el-table-column prop="name" label="仓库名称" />
      <el-table-column label="仓库类型">
        <template slot-scope="{ row }">
          <span>{{ row.type == 111 ? '大大仓库' : '小小仓库' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否禁用">
        <template slot-scope="{ row }">
          <span>{{ row.disablee == 0 ? '禁用' : '启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否默认">
        <template slot-scope="{ row }">
          <span>{{ row.defaultt == 0 ? '否' : '是' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="addr" label="地址" />
      <el-table-column prop="area" label="面积" />
      <el-table-column prop="contectId" label="联系人" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>8"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 新增/编辑 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="80px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="仓库编号" prop="name">
          <el-input v-model="temp.num" />
        </el-form-item>
        <el-form-item label="仓库类型" prop="type">
          <el-select v-model="temp.type" placeholder="仓库类型" clearable>
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否禁用" prop="disablee">
          <el-radio-group v-model="temp.disablee">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否默认" prop="defaultt">
          <el-radio-group v-model="temp.defaultt">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="temp.addr" />
        </el-form-item>
        <el-form-item label="面积" prop="area">
          <el-input v-model="temp.area" />
        </el-form-item>
        <el-form-item label="联系人" prop="contectId">
          <el-input v-model="temp.contectId" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addWarehouse, allWarehouse, delWarehouse, findWarehouse, updateWarehouse } from '@/api'
import Pagination from '@/components/Pagination'

export default {
  name: 'WareHouseManage',
  components: {
    Pagination
  },
  data() {
    return {
      listQuery: {
        num: '', // 仓库编号
        name: '', // 仓库名称
        type: '', // 仓库类型
        page: 1,
        limit: 8
      },
      types: [
        {
          id: '111',
          name: '大大仓库'
        },
        {
          id: '222',
          name: '小小仓库'
        }
      ],
      tableData: [],
      total: 0,
      temp: {
        id: '', // 仓库id
        name: '', // 仓库名称
        num: '',
        disablee: '',
        defaultt: '',
        addr: '',
        area: '',
        contectId: '',
        type: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑仓库',
        create: '新增仓库'
      },
      rules: {
        name: [{ required: true, message: 'name is required', trigger: 'blur' }],
        num: [{ required: true, message: 'num is required', trigger: 'blur' }],
        disablee: [{ required: true, message: 'remark is required' }],
        defaultt: [{ required: true, message: 'default is required' }],
        addr: [{ required: true, message: 'address is required', trigger: 'blur' }],
        area: [{ required: true, message: 'area is required', trigger: 'blur' }],
        contectId: [{ required: true, message: 'contect is required', trigger: 'blur' }],
        type: [{ required: true, message: 'type is required', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchAll()
  },
  methods: {
    // 筛选
    handleFilter() {
      findWarehouse({ num: this.listQuery.num, name: this.listQuery.name, type: this.listQuery.type }).then((res) => {
        this.tableData = res.data
      })
    },
    // 重置
    handleReset() {
      this.listQuery.num = ''
      this.listQuery.name = ''
      this.listQuery.type = ''
      this.fetchAll()
    },
    // 仓库列表
    fetchAll() {
      const { limit, page } = this.listQuery
      allWarehouse({ currentPage: page, pageSize: limit }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 重置表单
    resetTemp() {
      this.temp = {
        id: '', // 仓库id
        name: '', // 仓库名称
        num: '',
        disablee: '',
        defaultt: '',
        addr: '',
        area: '',
        contectId: '',
        type: ''
      }
    },
    // 点击新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新增产品类别
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addWarehouse(this.temp).then(() => {
            this.fetchAll()
            this.dialogFormVisible = false
            this.$notify({
              title: '新增仓库',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 更新产品类别
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateWarehouse(this.temp).then(() => {
            this.fetchAll()
            this.dialogFormVisible = false
            this.$notify({
              title: '编辑仓库',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 编辑
    handleEdit(row) {
      this.resetTemp()
      this.temp.id = row.id
      this.temp.name = row.name
      this.temp.num = row.num
      this.temp.disablee = row.disablee
      this.temp.defaultt = row.defaultt
      this.temp.addr = row.addr
      this.temp.area = row.area
      this.temp.contectId = row.contectId
      this.temp.type = row.type.toString()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delWarehouse({ id: id }).then(() => {
          this.fetchAll()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页事件
    getList() {
      this.fetchAll()
    }
  }
}
</script>
